<template>
	<view class="authenticationCenter">
		<view class="top">
			<NavBar title="认证中心" />
			<view class="top_2">
				<view class="left">
					<image class="image"
						:src="data.shopDetails.storeInfoDetail?data.httpUrl+'/app/file/viewFile?fileId='+data.shopDetails.storeInfoDetail.logFileId:'/static/img/index/63.png'"
						mode="aspectFill"></image>
					<view class="">
						{{data.shopDetails.storeInfoDetail.storeName}}
						<view class="">
							<image src="/static/img/index/66.png" mode="widthFix"></image>
							已认证
						</view>
					</view>
				</view>
				<image class="right" src="/static/img/index/65.png" mode="widthFix"></image>
			</view>

		</view>
		<scroll-view @scroll="handeScroll" scroll-y="true" @scrolltolower="scrolltolower">
			<view class="list" @touchstart="touchstart">
				<view @longpress="longpress(item)" @tap="navTo('/pages/certificationDetails/index?id='+item.applyId)"
					class="listItem" v-for="(item,index) in data.list" :key="index">
					<view class="left">
						{{item.applyType.name}}
						<text>申请时间:{{item.createTime}}</text>
						<text v-if="item.auditState.value == 'REJECTED'">拒绝原因：{{item.auditOpinion}}</text>
					</view>
					<text class="right"
						:class="item.auditState.value == 'REJECTED'?'jj':item.auditState.value == 'APPROVED'?'tg':'jg'">{{item.auditState.name}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="bottom">
			<text @tap="navTo('/pages/storeInformation/index?isEdit=1')">变更主体</text>
			<view></view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue'
	import NavBar from '@/components/navBar.vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import { myStoreDetail, pageStoreAuditRecords } from '@/utils/api/shop'
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
	const data = reactive<any>({
		shopDetails: {},
		list: [],
		page: { pageNo: 1, pageSize: 10 },
		total: 0,
		httpUrl: getApp().globalData.baseUrl
	})
	const handeScroll = () => {
		data.bool = false;
	}
	const touchstart = () => {
		data.bool = true;
	}
	const scrolltolower = () => {
		if (data.total != data.list.length) {
			data.page.pageNo += 1;
			requstList()
		}
	}
	const longpress = (item) => {
		console.log(data.bool,'data.bool')
		if (data.bool && item.auditState.value == 'REJECTED') {
			uni.showActionSheet({
				itemList: ['编辑'],
				success: (e) => {
					uni.navigateTo({
						url:'/pages/storeInformation/index?isEdit=1&isAuthentication=1'+'&id='+item.applyId
					})
				}
			})
		}
	}
	const requstList = () => {
		if (data.page.pageNo == 1) {
			data.list = [];
		}
		uni.showLoading({
			title: '加载中...',
			icon: 'none'
		})
		pageStoreAuditRecords({ data: data.page }).then((res) => {
			data.total = res.data.total;
			data.list = [...data.list, ...res.data.list];
			uni.hideLoading()
		})
	}
	myStoreDetail().then((res) => {
		data.shopDetails = res.data;
		console.log(res.data)
	})
	onShow(() => {
		data.page.pageNo = 1;
		requstList()
	})
</script>

<style lang="scss" scoped>
	:deep(.navBarTop) {
		background: transparent !important;
	}

	.authenticationCenter {
		height: 100vh;
		background: #F4F6FA;
		display: flex;
		flex-direction: column;

		>.bottom {
			padding: 13rpx 56rpx;
			background: #fff;

			text {
				width: 100%;
				display: inline-block;
				line-height: 88rpx;
				text-align: center;
				border-radius: 88rpx;
				background: #6B64D3;
				color: #fff;
				font-size: 32rpx;
			}

			>view {
				height: var(–window-bottom);
			}

		}

		scroll-view {
			flex: 1;
			overflow: auto;
		}

		.list {
			padding: 16rpx 24rpx;
		}

		.listItem {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding: 24rpx 32rpx;
			border-radius: 16rpx;
			background: #fff;
			margin-top: 20rpx;

			.left {
				display: flex;
				flex-direction: column;
				font-size: 32rpx;
				color: #262626;

				text:nth-of-type(1) {
					color: #595959;
					margin-top: 13rpx;
				}

				text:nth-of-type(2) {
					color: #FF263F;
					margin-top: 13rpx;
				}
			}

			.right {
				width: 101rpx;
				line-height: 52rpx;
				text-align: center;
				font-size: 26rpx;
				border-radius: 8rpx;
			}

			.jg {
				background-color: #FFFCE8;
				color: #F7BA1E;
				border: 1rpx solid #F7BA1E;
			}

			.jj {
				background-color: #FFEFE8;
				color: #FF4026;
				border: 1rpx solid #FF4026;
			}

			.tg {
				background-color: #EDFFE8;
				color: #10B809;
				border: 1rpx solid #10B809;
			}
		}

		>.top {
			background: url('/static/img/index/64.png') no-repeat;

			background-size: 100% 100%;

			.top_2 {
				background: url('/static/img/index/67.png') no-repeat;
				background-size: 100% 100%;
				margin: 45rpx 32rpx 0 32rpx;
				padding: 33rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					width: 160rpx;
				}

				.left {
					display: flex;
					align-items: center;

					>image {
						width: 128rpx;
						border-radius: 50%;
						height: 128rpx;
						margin-right: 24rpx;
					}

					>view {
						font-size: 36rpx;
						color: #fff;

						view {
							display: flex;
							align-items: center;
							margin-top: 12rpx;
							width: 126rpx;
							height: 39rpx;
							justify-content: center;
							border-radius: 39rpx;
							background: rgba(255, 255, 255, 0.60);
							font-size: 22rpx;
							color: #262626;

							image {
								width: 22rpx;
								margin-right: 7rpx;
							}
						}
					}
				}
			}
		}
	}
</style>